<template>
	<div class="process">
		<Card class="box-card">
			<div class="process-d">
				<span class="process-d-w">流程分析</span>
				<span>请在右侧点击“切换流程”按钮选择要分析的具体流程，并选择分析周期的起始日期和结束日期，点击确定查看结果。</span>
			</div>
			<div class="flex align-items-center">
				<ul class="process-header-tags flex-grow-base flex">
					<li v-for="(item,index) in tags" :key="index" :class="['box-sizing-base flex-all',{
						isActive: item.isActive
					}]"
					 @click="changeNewTag(item,tags)">
						{{item.title}}
					</li>
				</ul>
				<div class="flex align-items-center process-time">
					<span>统计周期：</span>
					<DatePicker type="daterange" :value="time" placement="bottom-end" placeholder="Select date" style="width: 200px"
					 @on-change="handleChange"></DatePicker>
					<!-- <el-date-picker
					  v-model="time"
					  type="daterange"
					  range-separator="-"
					  start-placeholder="开始日期"
					  end-placeholder="结束日期">
					</el-date-picker> -->
					<Button type="primary" class="timeBtn flex-all" size="small" @click="sureTime">确定</Button>
				</div>
				<Button type="primary" class="timeBtn flex-all" size="small" @click="changePop()">切换流程</Button>
			</div>
		</Card>
		<div v-if="isAll">
			<div class="process-main">
				<Card class="box-card">
					<div class="process-main-li flex" style="width: 100%; overflow-x: auto;">
						<div class="flex-grow-base process-main-list">
							<ul class="flex-all" ref="processList">
								<li v-for="(item,index) in lists" :key="index" class="box-sizing-base flex">
									<div>
										<img :src="item.icon" alt="">
									</div>
									<div class="pmli">
										<div class="flex align-items-center pmli-t">
											<div class="pmli-title ellipse" :title="item.name">{{item.name}}</div>
											<div class="pml-num">{{item.value?item.value:0}}</div>
										</div>
										<div class="flex align-items-center pmli-st">
											<div class="pml-prov">
												<div>已审批<span class="pml-provl">{{item.approvedCount}}</span></div>
												<div>待审批<span class="pml-provl">{{item.unApprovedCount}}</span></div>
											</div>
											<div class="pmli-per">
												<div>同比
													<span>
														<i v-if="item.tpercent > 0">+</i>
														<i v-else-if="item.tpercent < 0">-</i>
														{{item.tpercent?'%' + Math.abs(item.tpercent):0}}
													</span>
												</div>
												<div>环比
													<span>
														<i v-if="item.hpercent > 0">+</i>
														<i v-else-if="item.hpercent < 0">-</i>
														{{item.hpercent?'%' + Math.abs(item.hpercent):0}}
													</span>
												</div>
											</div>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div class="pml-right flex-all cursor-pointer" @click="changeT" v-if="lists.length>4">
							<i class="el-icon-arrow-right" v-if="isRight"></i>
							<i class="el-icon-arrow-left" v-else></i>
						</div>
					</div>
					<div class="process-main-charts">
						<div class="process-main-chart flex">
							<div class="flex-grow-base">
								<div class="pmc-title">
									<img src="../../assets/img/console/ywicon.png" alt="">
									业务数量总体走势
								</div>
								<div id="lineChart1"></div>
							</div>
							<div class="pmc-m">
								<div class="pmc-title flex align-items-center">
									<div class="flex-grow-base">
										<img src="../../assets/img/console/zbicon.png" alt="">
										业务占比例
									</div>
								</div>
								<div class="cir-charts">
									<div id="cirChart1"></div>
									<!-- <div class="cir-text" ref="cirChart">
										<div class="cir-text-b">{{cirtext1}}</div>
										<div>业务总数</div>
									</div> -->
								</div>

							</div>
						</div>
						<div class="process-main-chart flex">
							<div class="flex-grow-base">
								<div class="pmc-title">
									<img src="../../assets/img/console/ywicon1.png" alt="">
									业务效率总体走势
								</div>
								<div id="lineChart2"></div>
							</div>
							<div class="pmc-m">
								<div class="pmc-title flex align-items-center">
									<div class="flex-grow-base">
										<img src="../../assets/img/console/zbicon1.png" alt="">
										各业务占比例
									</div>
								</div>
								<div class="cir-charts">
									<div id="cirChart2"></div>
									<!-- <div class="cir-text" ref="cirChart">
										<div class="cir-text-b">{{cirtext2}}</div>
										<div>业务总耗时</div>
									</div> -->
								</div>

							</div>
						</div>
						<div class="process-main-chart flex">
							<div class="flex-grow-base">
								<div class="pmc-title">
									<img src="../../assets/img/console/hbicon.png" alt="">
									各业务流程耗时同比、环比分析
								</div>
								<div class="pmc-zc">
									<div class="pmc-zc-time flex justify-content-center">
										<div>
											<span class="pmc-zc-s">本周期总耗时</span>
											<div class="pmc-zc-f">（{{alltime}}）</div>
										</div>
										<div>
											<span class="pmc-zc-s">环比上周期总耗时</span>
											<div class="pmc-zc-f">（{{htime}}）</div>
										</div>
										<div>
											<span class="pmc-zc-s">同比上周期总耗时</span>
											<div class="pmc-zc-f">（{{ttime}}）</div>
										</div>
									</div>
									<div id="zChart"></div>
								</div>
							</div>
							<div class="pmc-m">
								<div class="pmc-title flex align-items-center">
									<div class="flex-grow-base">
										<img src="../../assets/img/console/gtime.png" alt="">
										平时耗时
									</div>
								</div>
								<div class="cir-charts">
									<div id="cirChart4"></div>
									<!-- <div class="cir-text" ref="cirChart">
										<div class="cir-text-b">{{cirChart4}}</div>
										<div>平时耗时</div>
									</div> -->
								</div>
							</div>
						</div>

						<div class="process-main-chart flex">
							<div class="flex-grow-base">
								<div class="pmc-title">
									<img src="../../assets/img/console/cwy.png" alt="">
									业务超时总体走势
								</div>
								<div id="lineChart3"></div>
							</div>
							<div class="pmc-m">
								<div class="pmc-title flex align-items-center">
									<div class="flex-grow-base">
										<img src="../../assets/img/console/ctime.png" alt="">
										各业务流程超时同比、环比分析
									</div>
								</div>
								<div class="pmc-zc">
									<div class="pmc-zc-time flex justify-content-center">
										<div>
											<span class="pmc-zc-s">本周期总超时</span>
											<div class="pmc-zc-f">（{{alltime}}）</div>
										</div>
										<div>
											<span class="pmc-zc-s">环比上周期总超时</span>
											<div class="pmc-zc-f">（{{htime}}）</div>
										</div>
										<div>
											<span class="pmc-zc-s">同比上周期总超时</span>
											<div class="pmc-zc-f">（{{ttime}}）</div>
										</div>
									</div>
									<div id="zChart1"></div>
								</div>
							</div>
						</div>

					</div>
				</Card>
			</div>
		</div>
		<one-process v-else :list="list" :oneTime="oneTime"></one-process>
		<u-pop title="流程选择" :isPop.sync="isPop">
			<div class="process-pop">
				<div>
					请选择你需要切换查看的流程，最多超过4个：
				</div>
				<div class="process-check">
					<CheckboxGroup v-model="checkList">
						<Checkbox :label="item.name" :disabled="checkList.length > 3 && checkList.indexOf(item.name) == -1" v-for="(item,index) in checkBoxs"
						 :key="index" @change="setProcess(item)"></Checkbox>
					</CheckboxGroup>
				</div>
				<div class="txt-right process-btns">
					<Button type="primary" @click="submit">确定</Button>
					<Button @click="changePop()">取消</Button>
				</div>
			</div>
		</u-pop>
	</div>
</template>

<script>
	import echarts from 'echarts'
	import ajax from "../../ajax_util"
	export default {
		data() {
			return {
				cirtext1: 0,
				cirtext2: 0,
				cirChart3: 0,
				cirChart4: 0,
				isPop: false,
				checkBoxs: [],
				process: [],
				checkList: [],
				tags: [],
				time: "",
				alltime: "",
				htime: "",
				ttime: "",
				lists: [],
				isRight: true,
				value: "",
				options: [{
					value: "",
					label: "2017"
				}],
				isAll: true,
				list: {},
				oneTime: [],
				proLists: []
			}
		},
		components: {
			uPop: resolve => require(["./uPop"], resolve),
			oneProcess: resolve => require(["./oneProcess"], resolve)
		},
		methods: {
			changeNewTag(item, lists) {
				// this.oneTime = [];
				this.list = item;
				this.changeTag(item, lists);
				if (item.title == "总体分析") {
					this.isAll = true;
					this.getAll(this.time[0], this.time[1]);
				} else {
					this.isAll = false;
				}
			},
			handleChange(date) {
				this.time = date;
			},
			changeT() {
				if (this.isRight) {
					this.$refs.processList.style.marginLeft = "-7.2rem";
				} else {
					this.$refs.processList.style.marginLeft = 0;
				}
				this.isRight = !this.isRight;
			},
			lineChart(id, data, val, d, v) {
				let myChart = echarts.init(document.getElementById(id))
				var legend = [];
				var series = [];
				var timeArr = [];
				var dataZoom = [];
				var left = "";
				if (v == '效率') {
					left = "14";
				} else {
					if (id == "lineChart3") {
						left = "14"
					} else {
						left = "24"
					}

				}
				data.forEach((item, index) => {
					if (val == "duration") {
						if(item[val] && item.completeQuantity != undefined && item.completeQuantity != null && item.completeQuantity != 0){
							item[val] = parseFloat(item[val]/item.completeQuantity).toFixed(2);
						}else{
							item[val] = 0
						}
						
					} else {
						item[val] = item[val] ? item[val] : 0;
					}
					if (!legend.includes(item.name)) {
						legend.push(item.name);
					}
					if (item.time) {
						if (!item.time.includes("年")) {
							item.time = item.time.slice(0, 4) + "年" + item.time.slice(4) + "月";
						}
					}
					if (!timeArr.includes(item.time)) {
						timeArr.push(item.time)
					}
					if (JSON.stringify(series).includes(item.name)) {
						series.forEach(si => {
							if (si.name == item.name) {
								si.data.push(Number(item[val]))
							}
						})
					} else {
						series.push({
							name: item.name,
							type: 'line',
							data: [Number(item[val])]
						})
					}
				})
				series.forEach((item, index) => {
					switch (index) {
						case 0:
							break;
							item.itemStyle = {
								normal: {
									color: '#89D6FF', //改变折线点的颜色
									lineStyle: {
										color: '#89D6FF' //改变折线颜色
									}
								}
							};
							break;
						case 1:
							item.itemStyle = {
								normal: {
									color: '#A96AFF', //改变折线点的颜色
									lineStyle: {
										color: '#A96AFF' //改变折线颜色
									}
								}
							};
							break;
						case 2:
							item.itemStyle = {
								normal: {
									color: '#09BE91', //改变折线点的颜色
									lineStyle: {
										color: '#09BE91' //改变折线颜色
									}
								}
							};
							break;
						case 3:
							item.itemStyle = {
								normal: {
									color: '#ffc77e', //改变折线点的颜色
									lineStyle: {
										color: '#ffc77e' //改变折线颜色
									}
								}
							};
							break;
						case 3:
							item.itemStyle = {
								normal: {
									color: '#25c8d2', //改变折线点的颜色
									lineStyle: {
										color: '#25c8d2' //改变折线颜色
									}
								}
							};
							break;
					}
				})
				if (timeArr.length > 10) {
					dataZoom = [{
						show: true,
						realtime: true,
						start: 30,
						end: 70,
						xAxis: [0, 1]
					}]
				}
				console.log("series---->",series)
				myChart.setOption({
					tooltip: {
						trigger: 'axis',
						formatter: function(params) {
							var relVal = params[0].name;
							for (var i = 0, l = params.length; i < l; i++) {
								relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + d;
							}
							return relVal;
						}
					},
					legend: {
						data: legend
					},
					grid: {
						left: left,
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						xAxisIndex: 1,
						type: 'category',
						boundaryGap: false,
						axisLine: {
							onZero: true
						},
						data: timeArr,
					},
					yAxis: {
						name: v ? (v + "（" + d + "）") : d,
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: ['#efefef'],
								width: 1,
								type: 'solid'
							},
						}
					},
					dataZoom: dataZoom,
					series: series
				}, true)
			},
			cirChart(id, data, text, number) {
				let myChart = echarts.init(document.getElementById(id));
				var legend = [];
				var series = [];
				data.forEach((item, index) => {
					legend.push(item.name);
					switch (index) {
						case 0:
							item.color = "#89D6FF";
							break;
						case 1:
							item.color = "#A96AFF";
							break;
						case 2:
							item.color = "#09BE91";
							break;
						case 3:
							item.color = "#ffc77e";
							break;
						case 4:
							item.color = "#25c8d2";
							break;
					}
					series.push({
						name: item.name,
						value: item.proportionPercent ? item.proportionPercent : 0,
						itemStyle: {
							color: item.color
						}
					})
				});
				var center = (document.getElementById(id).offsetHeight - legend.length * 25) / 2;
				myChart.setOption({
					title: {
						text: number,
						textStyle: {
							fontWeight: "normal",
							textAlign: "center",
							fontSize: 28
						},
						subtext: text,
						subtextStyle: {
							fontSize: 20
						},
						top: "43%",
						left: text == '业务总耗时' ? "18%" : "20%"
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b}: {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						left: "60%",
						top: center,
						icon: "circle",
						data: legend,
						textStyle: {
							fontSize: 14
						},
						formatter: function(params) {
							console.log("params----->", params)
							var temp = ""
							if (params.length > 10) {
								temp = params.slice(0, params.length / 2) + '\n' + params.slice(params.length / 2)
							} else {
								temp = params
							}
							return temp
						}
					},
					series: [{
						name: '',
						type: 'pie',
						radius: ['50%', '70%'],
						center: ["28%", "50%"],
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: false,
								textStyle: {
									fontSize: '20',
									fontWeight: 'bold'
								}
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: series
					}]
				});
			},
			zChart(id, data, val) {
				let myChart = echarts.init(document.getElementById(id));
				var source = [];
				var series = [];
				data.forEach((item, index) => {
					console.log(item)
					source.push({
						product: item.name,
						"总耗时": item.value ? item.value : 0,
						"上周期环比": item.hValue ? item.hValue : item.hvalue ? item.hvalue : 0,
						"上周期同比": item.tValue ? item.tValue : item.tvalue ? item.tvalue : 0
					});
				})
				var grid = {};
				if (val == '耗时') {
					grid = {
						left: "40",
						width: "92%"
					}
				}
				myChart.setOption({
					legend: {
						data: []
					},
					tooltip: {},
					grid: grid,
					dataset: {
						dimensions: ['product', '总耗时', "上周期环比", '上周期同比'],
						source: source
					},
					xAxis: {
						type: 'category',
						axisLabel: {
							interval: 0,
							// rotate: 10,
							formatter: function(params) {
								console.log("-params-->", params)
								var temp = ""
								if (params != undefined && params != null && params.length > 6) {
									temp = params.slice(0, params.length / 2) + '\n' + params.slice(params.length / 2)
								} else {
									temp = params
								}
								return temp
							}
						}
					},
					yAxis: {
						name: val + "（小时）",
						splitLine: {
							show: true,
							lineStyle: {
								color: ['#efefef'],
								width: 1,
								type: 'solid'
							},
						}
					},
					series: [{
							type: 'bar',
							barWidth: '20',
							itemStyle: {
								normal: {
									color: '#FFC77E'
								}
							}
						},
						{
							type: 'bar',
							barWidth: '20',
							itemStyle: {
								normal: {
									color: '#7AD1FF'
								}
							}
						},
						{
							type: 'bar',
							barWidth: '20',
							itemStyle: {
								normal: {
									color: '#3ED781'
								}
							}
						}
					]
				})
			},
			changePop() {
				this.isPop = !this.isPop;
			},
			getProcess() {
				this.checkList = [];
				this.process = [];
				this.tags = [{
					title: "总体分析",
					key: "",
					isActive: true
				}];
				var url = this.CONFIG.analysis_url + "/anapi/workflows"
				var that = this
				ajax.get({
					url: url,
					that: that,
					success: function(data) {
						that.checkBoxs = data;
						that.checkBoxs.forEach(item => {
							if (item.isFavor) {
								that.checkList.push(item.name)
								that.process.push(item.id)
								that.tags.push({
									title: item.name,
									key: item.id,
									isActive: false
								})
							}
						})
						that.getAll();
					}
				})
			},
			setProcess(item) {
				var arr = [];
				this.checkBoxs.forEach(item => {
					if (this.checkList.includes(item.name)) {
						arr.push(item.id)
					}
				});
				this.process = arr;
			},
			getTime(num, year) {
				var day = new Date().setMonth((new Date().getMonth() - num)); //日期是30天前的对应时间戳
				if (year) {
					day = new Date().setFullYear((new Date().getFullYear() - num));
				}
				day = new Date(day); //转换成标准时间
				var y = day.getFullYear(); //年
				var m = day.getMonth() + 1; //月
				var d = day.getDate(); //日
				if (m < 10) {
					m = '0' + m;
				}
				if (d < 10) {
					d = '0' + d;
				}
				day = y + '-' + m + '-' + d;
				return day;
			},
			getLastMon() {
				return this.getTime(4);
			},
			getDate() {
				return this.getTime(0);
			},
			getAll(startTime, endTime) {
				var startTime = startTime ? startTime : this.getLastMon();
				var endTime = endTime ? endTime : this.getDate();
				this.time = [startTime, endTime];
				this.oneTime = this.time;
				var str = "&";
				this.process.forEach((item, index) => {
					if (index != this.process.length - 1) {
						str += ("workflowIds=" + item + "&")
					} else {
						str += ("workflowIds=" + item)
					}

				});
				this.$Loading.start();
				var url = this.CONFIG.analysis_url + "/anapi/workflows/index?fromDate=" + startTime + "&toDate=" + endTime + str
				var that = this
				ajax.get({
					url: url,
					that: that,
					params: null,
					success: function(data) {

						var arr = data.analyseQuantityList;
						var newArr = [];
						arr.forEach((item, index) => {
							if (index) {
								newArr.push(item)
								if (index + 1 > 4) {
									item.icon = require("../../assets/img/console/lc4.png");
								} else {
									item.icon = require("../../assets/img/console/lc" + (index + 1) + ".png");
								}
							}

						})
						that.lists = newArr;
						that.alltime = that.returnTime(startTime.split("-"), endTime.split("-"));
						var hStartTime = data.hstartTime.split("-");
						var hEndTime = data.hstartTime.split("-");
						that.htime = that.returnTime(hStartTime, hEndTime)
						var tStartTime = data.tstartTime.split("-");
						var tEndTime = data.tendTime.split("-");
						that.ttime = that.returnTime(tStartTime, tEndTime)
						that.cirtext1 = data.analyseQuantityList[0].value;
						that.cirtext2 = 0;
						that.cirChart4 = 0;
						// data.analyseQuantityList.forEach(item => {
						// 	item.value = item.value ? Number(item.value) : 0;
						// 	that.cirtext1 += item.value;
						// })
						data.analyseTimeList.forEach(item => {
							item.value = item.value ? Number(item.value) : 0;
							that.cirtext2 += item.value;
						})
						data.analyseAvgTimeList.forEach(item => {
							item.value = item.value ? Number(item.value) : 0;
							that.cirChart4 += item.value;
						})
						that.cirtext1 = String(that.cirtext1).split(".").length > 1 ? that.cirtext1.toFixed(2) : that.cirtext1;
						that.cirtext2 = String(that.cirtext2).split(".").length > 1 ? that.cirtext2.toFixed(2) : that.cirtext2;
						that.cirChart4 = String(that.cirChart4).split(".").length > 1 ? that.cirChart4.toFixed(2) : that.cirChart4;
						that.cirChart("cirChart1", data.analyseQuantityList, "业务总数", that.cirtext1);
						that.lineChart("lineChart1", data.trend, "quantity", "个", "数量");
						that.cirChart("cirChart2", data.analyseTimeList, "业务总耗时", that.cirtext2);
						that.lineChart("lineChart2", data.trend, "duration", "小时", "效率");
						// this.cirChart("cirChart3",data.analyseQuantityList,"业务总数");
						that.zChart("zChart1", data.analyseDueTimeList, "超时");
						that.lineChart("lineChart3", data.trend, "dueQuantity", "个", "数量");
						that.zChart("zChart", data.analyseTimeList, "耗时");
						that.cirChart("cirChart4", data.analyseAvgTimeList, "平时耗时", that.cirChart4);

						that.$Loading.finish();
					}
				})
			},
			returnTime(start, end) {
				var str = "";
				if (start[0] == end[0]) {
					str = start[0] + "年";
					if (start[1] == end[1]) {
						str += start[1] + "月"
					} else {
						str += start[1] + "~" + end[1] + "月"
					}
				} else {
					str = start[0] + "年" + start[1] + "月~" + end[0] + "年" + end[1] + "月";
				}
				return str;
			},
			submit() {
				var lastProcess = JSON.parse(JSON.stringify(this.tags));
				this.process = [];
				this.tags = [{
					title: "总体分析",
					key: "",
					isActive: true
				}];
				if (this.checkList.length) {
					if (this.checkList.length > 4) {
						this.$Message.error("最多只能选择4个！")
					} else {
						this.checkBoxs.forEach(item => {
							if (this.checkList.includes(item.name)) {
								this.process.push(item.id);
								this.tags.push({
									title: item.name,
									key: item.id,
									isActive: false
								})
							}
						})
						this.changePop();
						this.isAll = true;
						this.getAll(this.time[0], this.time[1]);
					}
				} else {
					this.$Message.error("请至少选择1个！");
					// this.tags = lastProcess;
					// this.changePop();
				}
			},
			sureTime() {
				if (this.time[0] && this.time[1]) {
					if (this.isAll) {
						this.getAll(this.setSureTime(this.time[0]), this.setSureTime(this.time[1]));
					} else {
						this.oneTime = this.time;
					}
				} else {
					this.$Message.error("请选择时间！");
				}
			},
			setSureTime(time) {
				var day = "";
				day = new Date(time); //转换成标准时间
				var y = day.getFullYear(); //年
				var m = day.getMonth() + 1; //月
				var d = day.getDate(); //日
				if (m < 10) {
					m = '0' + m;
				}
				if (d < 10) {
					d = '0' + d;
				}
				day = y + '-' + m + '-' + d;
				return day;
			}

		},
		mounted() {
			this.getProcess();
		}
	}
</script>

<style lang="less">
	// @import "../../assets/css/mixins.scss";
	.process {
		// padding: .4rem;
		background-color: #efefef;

		// .Card__body {
		// 	padding: .4rem .68rem .28rem;
		// }
		// .Card.is-always-shadow {
		// 	box-shadow: none;
		// }
		.process-d {
			margin: .2rem 0 .66rem;
			font-size: .3rem;

			.process-d-w {
				font-size: .48rem;
				color: #333;
			}
		}

		.process-header-tags {
			li {
				padding: .2rem;
				height: .8rem;
				border: 1px solid #eee;
				font-size: .3rem;
				cursor: pointer;

				&.isActive {
					background-color: #4DA0FE;
					color: #fff;
				}
			}
		}

		.timeBtn.ivu-btn-primary {
			width: 1.4rem;
			height: .64rem;
			background-color: #4DA0FE;
		}

		.process-time {
			margin-right: .2rem;

			.el-date-editor .el-range-input {
				font-size: .28rem;
			}

			.el-input__inner {
				height: .6rem;
				line-height: .6rem;
			}

			.timeBtn {
				margin-right: 0;
				margin-left: .14rem;
			}

			.el-input__icon,
			.el-range-separator {
				margin-top: -.2rem;
			}

			.el-date-editor .el-range__icon,
			.el-range-separator,
			.el-date-editor .el-range__close-icon {
				line-height: .6rem;
			}
		}

		.process-main {
			.process-main-li {
				.process-main-list {
					margin: .82rem 0 1rem;
				}

				li {
					width: 7rem;
					height: 2.8rem;
					margin-right: .6rem;
					padding: .48rem .4rem;
					border-radius: .24rem;
					margin-right: 1.56rem;
					background: linear-gradient(0deg, rgba(113, 207, 255, 1) 0%, rgba(99, 183, 255, 1) 100%);
					color: #fff;

					&:last-child {
						margin-right: 0;
					}

					.pmli {
						margin-left: .36rem;

						.pmli-t {
							line-height: .6rem;
						}

						.pmli-st {
							margin-top: .4rem;
							font-size: .32rem;

							.pml-prov {
								margin-right: .45rem;

								.pml-provl {
									margin-left: .2rem;
								}
							}
						}
					}

					.pmli-title {
						font-size: .4rem;
						// @include ellipse();
						width: 2.4rem;
					}

					.pml-num {
						font-size: .64rem;
						margin-left: .38rem;
					}

					.pmli-per {
						span {
							margin-left: .3rem;
						}
					}
				}

				.pml-right {
					width: 1.4rem;
					background: #fff;
					border: 1px solid #eee;
					padding: 0;
					font-size: 2rem;
					color: #999;
				}
			}

			.process-main-chart {
				margin-top: .6rem;
				padding-bottom: .4rem;

				// border-bottom: 1px dashed #BEBEBE;
				#lineChart1,
				#lineChart2,
				#lineChart3 {
					width: 100%;
					height: 6.4rem;
					margin-top: .4rem;
				}

				#zChart,
				#zChart1 {
					width: 100%;
					height: 6.95rem;
					margin-top: .4rem;
				}

				#zChart1 {
					padding-top: .1rem;
					height: 6.4rem;
				}

				.pmc-title {
					border-bottom: 1px solid #BEBEBE;
					padding-bottom: .36rem;
					font-size: .52rem;
					// padding-left: .4rem;
					color: #666;

					img {
						width: .6rem;
						margin-right: .1rem;
					}

					// 					position: relative;
					// 					&:after {
					// 						content: "";
					// 						height: .48rem;
					// 						width: .2rem;
					// 						background-color: #0085D0;
					// 						position: absolute;
					// 						top: 50%;
					// 						margin-top: -.3rem;
					// 						left: 0;
					// 					}
					.pmc-title-se {
						width: 2rem;

						.el-input__inner {
							height: 30px;
							line-height: 30px;
						}

						.el-input__suffix {
							top: 4px;
						}
					}
				}

				.pmc-zc {
					position: relative;
					padding-top: .5rem;

					.pmc-zc-time {
						position: absolute;
						top: .5rem;
						left: 0;
						width: 100%;
						font-size: .3rem;
						text-align: center;

						div {
							margin-right: .4rem;

							&:last-child {
								margin-right: 0;
							}

							.pmc-zc-s {
								position: relative;

								&:after {
									content: "";
									position: absolute;
									top: 1px;
									left: -.36rem;
									width: .28rem;
									height: .28rem;
									background-color: #FFC77E;
								}
							}

							&:nth-of-type(2) .pmc-zc-s:after {
								background-color: #7AD1FF;
							}

							&:nth-of-type(3) .pmc-zc-s:after {
								background-color: #3ED781;
							}
						}

						.pmc-zc-f {
							font-size: .28rem;
							color: #989999;
						}
					}
				}

				.pmc-m {
					width: 10.64rem;
					margin-left: 1.74rem;

					#cirChart1,
					#cirChart2,
					#cirChart3,
					#cirChart4 {
						height: 6.4rem;
						width: 100%;
					}

					.cir-charts {
						position: relative;

						.cir-text {
							position: absolute;
							top: calc(50% - .6rem);
							left: 10%;
							width: 4rem;
							text-align: center;
							line-height: .6rem;

							.cir-text-b {
								font-size: .84rem;
							}
						}
					}
				}
			}

			// margin-top: .2rem;
		}

		.ivu-checkbox-group {
			font-size: .3rem;
		}

		.process-pop {
			color: #666;
			font-size: .3rem;

			div:first-child {
				font-weight: bold;
			}

			.process-check {
				margin-top: .4rem;
			}

			.process-btns {
				margin-top: 2rem;
			}
		}
	}

	@media screen and (max-width: 1600px) {
		.process .process-main .process-main-chart .pmc-m .cir-charts .cir-text {
			top: calc(50% - .6rem);
			left: 23%;
		}
	}
</style>
